<template>
  <div class="nowList" style="animation-duration: 500ms">
    <div class="nowList_main">
      <div class="taber">
        <div style="height:50px">
          <div
            @click="changeTabs"
            @mouseenter="tabsEnter"
            @mouseleave="tabsLeave"
            class="taber_left"
          >
            <!-- <img
              class="taber_img1"
              ref="taber_img1"
              :src="require('@/assets/images/tad_tab_th.png')"
              alt=""
            /> -->
            <div class="taber_img1" ref="taber_img1">两小时销售榜</div>
          </div>
          <transition
            enter-active-class="animated fadeIn "
            leave-active-class="animated fadeOut "
            mode="out-in"
          >
            <img
              ref="tabs1"
              class="tabs1"
              :src="require('@/assets/images/tad_tab_line.png')"
              alt=""
            />
          </transition>
        </div>
        <div style="height:50px">
          <div
            @mouseenter="tabsEnter2"
            @mouseleave="tabsLeave2"
            @click="changeTabs2"
            class="taber_right"
          >
            <!-- <img
              ref="taber_img2"
              class="taber_img2"
              :src="require('@/assets/images/tad_tab_th.png')"
              alt=""
            /> -->
            <div class="taber_img2" ref="taber_img2">今日销量榜</div>
          </div>
          <img
            ref="tabs2"
            class="tabs2"
            :src="require('@/assets/images/tad_tab_line.png')"
            alt=""
          />
        </div>
      </div>
      <div class="goods_Box">
        <div class="goods_main">
          <div class="goods_taber">
            <ul class="taber_ul" @click="changebar">
              <li class="taber_li" v-for="item in tabsList" :key="item.id">
                <!-- :data-id="item.id" -->
                <input
                  class="radio"
                  :id="item.id"
                  type="radio"
                  name="radios"
                  :value="item.id"
                  v-model="radio"
                />
                <label :for="item.id" style="cursor:pointer">{{
                  item.name
                }}</label>
              </li>
            </ul>
          </div>
          <div v-if="loading">
            <!-- <img
              class="loading"
              :src="require('@/assets/images/loading.gif')"
              alt=""
            /> -->
            <pageloading></pageloading>
          </div>
          <div v-if="goodsShow" class="goods_list">
            <div class="goods_left">
              <div class="goods_top">
                <div class="rowBox">
                  <div
                    class="hover_box"
                    v-for="(item, index) in topList"
                    :key="index"
                  >
                    <!-- top标签 -->
                    <!-- <div class="position_Box">
                      <img
                        class="topimg"
                        :src="require('@/assets/images/top_big.png')"
                        alt=""
                      />
                      <div class="top_num">{{ index + 1 }}</div>
                    </div> -->
                    <el-card shadow="always" :body-style="{ padding: '0px' }">
                      <div class="top_main">
                        <div
                          class="demo-image__lazy"
                          style="cursor: pointer;width:220px;height:220px"
                          @click="godetails(item.id)"
                        >
                          <el-image
                            class="elimg"
                            fit
                            :src="item.goods_img"
                            lazy
                          >
                            <div slot="placeholder" class="image-slot">
                              <Goodsloading></Goodsloading>
                            </div>
                          </el-image>
                        </div>
                        <div class="top_right">
                          <div class="top_title">
                            {{ item.goods_name }}
                          </div>
                          <div class="top_roll2" v-if="numshow">
                            近2小时销量<span
                              style="color:red;font-weight:bold"
                              >{{ item.two_hour_num }}</span
                            >
                            件
                          </div>
                          <div class="top_roll2" v-else>
                            今日销量<span style="color:red;font-weight:bold">{{
                              item.two_hour_num
                            }}</span>
                            件
                          </div>
                          <div class="top_data">
                            <div>
                              <p>{{ item.after_coupon_price }}</p>
                              <p>卷后价</p>
                            </div>
                            <div>
                              <p>{{ item.commission_than }}%</p>
                              <p>定向佣金</p>
                            </div>
                            <div>
                              <p>
                                {{
                                  (
                                    item.goods_price *
                                    (item.commission_than / 100)
                                  ).toFixed(2)
                                }}
                              </p>
                              <p>佣金</p>
                            </div>
                          </div>
                          <div class="coupon_Box" style="font-size:15px">
                            <a
                              style="cursor: pointer;"
                              :href="item.coupon_url"
                              target="_blank"
                              rel="noopener noreferrer"
                            >
                              <div class="coupon_img">
                                <span>劵:</span>
                                <span style="margin-left:-4px"
                                  >¥ {{ parseInt(item.coupon_price) }}</span
                                >
                              </div>
                            </a>
                            <div>
                              已领劵:<span style="color:red">{{
                                item.coupon_collar_count
                              }}</span>
                            </div>
                          </div>
                          <el-progress
                            style="width:200px;margin: 0 auto;"
                            :percentage="
                              (item.coupon_collar_count / item.coupon_num) * 100
                            "
                          ></el-progress>
                        </div>
                        <transition name="animat">
                          <div v-show="Expand" class="shops_Box">
                            <div class="shops_action">
                              <div class="action_box">
                                <div class="join_collect">
                                  <el-button
                                    class="join_btn1"
                                    type="primary"
                                    @click="addCollection(item.id)"
                                  >
                                    <span class="iconimg1"></span>
                                    <span>
                                      加入收藏
                                    </span>
                                  </el-button>
                                </div>
                                <div class="copy">
                                  <el-button
                                    class="join_btn2"
                                    type="primary"
                                    @mousedown.native="
                                      handleOk2('topli' + index)
                                    "
                                    @click="handleOk('topli' + index)"
                                  >
                                    <span class="iconimg2"></span>
                                    <span>
                                      复制文案
                                    </span>
                                  </el-button>
                                </div>
                                <div
                                  class="position_hover"
                                  :id="'topli' + index"
                                >
                                  <div class="demo-image__lazy">
                                    <el-image
                                      fit
                                      :src="item.goods_img"
                                      style="width:80px"
                                    >
                                    </el-image>
                                  </div>
                                  <div>{{ item.goods_name }}</div>
                                  <div>
                                    原价:{{ item.goods_price }}【卷后价:{{
                                      item.after_coupon_price
                                    }}】 包邮
                                  </div>
                                  <div>领卷:{{ item.coupon_url }}</div>
                                  <div>抢购:{{ item.goods_url }}</div>
                                </div>
                              </div>
                            </div>
                            <div class="shops_info">
                              <el-row :gutter="20">
                                <el-col :span="12"
                                  ><div>
                                    优惠卷剩余:<span style="color:red">{{
                                      item.coupon_collar_count
                                    }}</span
                                    >/{{ item.coupon_num }}
                                  </div>
                                </el-col>
                                <el-col :span="12"
                                  ><div>
                                    店铺:<span>{{ item.shop_name }}</span>
                                  </div>
                                </el-col>
                                <el-col :span="12"
                                  ><div>
                                    放单人:<span>{{ item.nickname }}</span>
                                  </div>
                                </el-col>
                              </el-row>
                            </div>
                          </div>
                        </transition>
                      </div>
                    </el-card>
                  </div>
                </div>
              </div>
              <div class="goods_bot">
                <el-row :gutter="24">
                  <el-col
                    :span="12"
                    class="hover_box2"
                    v-for="(item, index) in botList"
                    :key="index"
                  >
                    <!-- top标签 -->
                    <!-- <div class="position_Box">
                      <img
                        class="topimg2"
                        :src="require('@/assets/images/top_big.png')"
                        alt=""
                      />
                      <div class="top_num2">{{ index + 3 }}</div>
                    </div> -->
                    <el-card shadow="always" :body-style="{ padding: '0px' }">
                      <div class="top_main2">
                        <div
                          class="demo-image__lazy"
                          style="cursor: pointer;width:220px;height:220px"
                          @click="godetails(item.id)"
                        >
                          <el-image
                            class="elimg2"
                            style="width:220px;height:220px"
                            fit
                            :src="item.goods_img"
                            lazy
                          >
                            <div slot="placeholder" class="image-slot">
                              <Goodsloading></Goodsloading>
                            </div>
                          </el-image>
                        </div>
                        <div class="top_right2">
                          <div class="top_roll2" v-if="numshow">
                            近2小时销量<span
                              style="color:red;font-weight:bold"
                              >{{ item.two_hour_num }}</span
                            >
                            件
                          </div>
                          <div class="top_roll2" v-else>
                            今日销量<span style="color:red;font-weight:bold">{{
                              item.two_hour_num
                            }}</span>
                            件
                          </div>
                          <div class="top_title2">
                            {{ item.goods_name }}
                          </div>
                          <div class="top_data2">
                            <div>
                              <p>{{ item.after_coupon_price }}</p>
                              <p>卷后价</p>
                            </div>
                            <div>
                              <p>{{ item.commission_than }}%</p>
                              <p>定向佣金</p>
                            </div>
                            <div>
                              <p>
                                {{
                                  (
                                    item.goods_price *
                                    (item.commission_than / 100)
                                  ).toFixed(2)
                                }}
                              </p>
                              <p>佣金</p>
                            </div>
                          </div>
                          <div class="coupon_Box">
                            <a
                              style="cursor: pointer;"
                              :href="item.coupon_url"
                              target="_blank"
                              rel="noopener noreferrer"
                            >
                              <div class="coupon_img">
                                <span>劵:</span>
                                <span style="margin-left:-4px"
                                  >¥ {{ parseInt(item.coupon_price) }}</span
                                >
                              </div>
                            </a>
                            <div>
                              已领劵:<span style="color:red">{{
                                item.coupon_collar_count
                              }}</span>
                            </div>
                          </div>
                          <el-progress
                            style="width:200px;margin: 0 auto;"
                            :percentage="
                              (item.coupon_collar_count / item.coupon_num) * 100
                            "
                          ></el-progress>
                        </div>
                        <div class="shops_Box2">
                          <div class="shops_action2">
                            <div class="action_box2">
                              <div class="join_collect2">
                                <el-button
                                  class="join_btn12"
                                  type="primary"
                                  @click="addCollection(item.id)"
                                >
                                  <span class="iconimg12"></span>
                                  <span>
                                    加入收藏
                                  </span>
                                </el-button>
                              </div>
                              <div class="copy2">
                                <el-button
                                  class="join_btn22"
                                  type="primary"
                                  @mousedown.native="handleOk2('botli' + index)"
                                  @click="handleOk('botli' + index)"
                                >
                                  <span class="iconimg22"></span>
                                  <span>
                                    复制文案
                                  </span>
                                </el-button>
                              </div>
                              <div class="position_hover" :id="'botli' + index">
                                <!-- <el-card
                                  shadow="always"
                                  :body-style="{ padding: '10px' }"
                                > -->
                                <div class="demo-image__lazy">
                                  <el-image
                                    fit
                                    :src="item.goods_img"
                                    style="width:80px"
                                  >
                                  </el-image>
                                </div>
                                <div>{{ item.goods_name }}</div>
                                <div>
                                  原价:{{ item.goods_price }}【卷后价:{{
                                    item.after_coupon_price
                                  }}】 包邮
                                </div>
                                <div>领卷:{{ item.coupon_url }}</div>
                                <div>抢购:{{ item.goods_url }}</div>
                                <!-- </el-card> -->
                              </div>
                            </div>
                          </div>
                          <div class="shops_info22">
                            <el-row :gutter="20">
                              <el-col :span="20">
                                <div class="disflex">
                                  <span class="childone">优惠卷剩余:</span>
                                  <div class="childtwo">
                                    <span style="color:red">{{
                                      item.coupon_collar_count
                                    }}</span
                                    >/{{ item.coupon_num }}
                                  </div>
                                </div>
                              </el-col>
                              <el-col :span="20"
                                ><div class="disflex">
                                  <span class="childone">店铺:</span>
                                  <span class="childtwo">{{
                                    item.shop_name
                                  }}</span>
                                </div>
                              </el-col>
                              <el-col :span="20"
                                ><div class="disflex">
                                  <span class="childone">放单人:</span>
                                  <span class="childtwo">{{
                                    item.nickname
                                  }}</span>
                                </div>
                              </el-col>
                            </el-row>
                          </div>
                        </div>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
              <!-- 分页器 -->
              <!-- @size-change="handleSizeChange" -->
              <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                background
                :page-size="100"
                :pager-count="11"
                layout="total, prev, pager, next, jumper"
                :total="count"
              >
                <!-- :page-sizes="[100, 200, 300, 400]" -->
              </el-pagination>
            </div>
            <div class="goods_right">
              <div
                :span="24"
                class="hover_box3"
                v-for="(item, index) in rightList"
                :key="index"
              >
                <div class="position_Box3">
                  <img
                    class="topimg3"
                    :src="require('@/assets/images/rec_icon.png')"
                    alt=""
                  />
                </div>
                <el-card shadow="always" :body-style="{ padding: '0px' }">
                  <div class="top_main3">
                    <div
                      class="demo-image__lazy"
                      style="cursor: pointer;width:220px;height:220px"
                      @click="godetails(item.id)"
                    >
                      <el-image
                        class="elimg2"
                        style="width:220px;height:220px"
                        fit
                        :src="item.goods_img"
                        lazy
                      >
                        <div slot="placeholder" class="image-slot">
                          <Goodsloading></Goodsloading>
                        </div>
                      </el-image>
                    </div>
                    <div class="top_right2">
                      <div class="top_roll2" v-if="numshow">
                        近2小时销量<span style="color:red;font-weight:bold">{{
                          item.two_hour_num
                        }}</span>
                        件
                      </div>
                      <div class="top_roll2" v-else>
                        今日销量<span style="color:red;font-weight:bold">{{
                          item.two_hour_num
                        }}</span>
                        件
                      </div>
                      <div class="top_title2">
                        {{ item.goods_name }}
                      </div>
                      <div class="top_data2">
                        <div>
                          <p>{{ item.after_coupon_price }}</p>
                          <p>卷后价</p>
                        </div>
                        <div>
                          <p>{{ item.commission_than }}%</p>
                          <p>定向佣金</p>
                        </div>
                        <div>
                          <p>
                            {{
                              (
                                item.goods_price *
                                (item.commission_than / 100)
                              ).toFixed(2)
                            }}
                          </p>
                          <p>佣金</p>
                        </div>
                      </div>
                      <div class="coupon_Box">
                        <a
                          style="cursor: pointer;"
                          :href="item.coupon_url"
                          target="_blank"
                          rel="noopener noreferrer"
                        >
                          <div class="coupon_img">
                            <span>劵:</span>
                            <span style="margin-left:-4px"
                              >¥ {{ parseInt(item.coupon_price) }}</span
                            >
                          </div>
                        </a>
                        <div>
                          已领劵:<span style="color:red">{{
                            item.coupon_collar_count
                          }}</span>
                        </div>
                      </div>
                      <el-progress
                        style="width:200px;margin: 0 auto;"
                        :percentage="
                          (item.coupon_collar_count / item.coupon_num) * 100
                        "
                      ></el-progress>
                    </div>
                    <div class="shops_Box2">
                      <div class="shops_action2">
                        <div class="action_box2">
                          <div class="join_collect2">
                            <el-button
                              class="join_btn12"
                              type="primary"
                              @click="addCollection(item.id)"
                            >
                              <span class="iconimg12"></span>
                              <span>
                                加入收藏
                              </span>
                            </el-button>
                          </div>
                          <div class="copy2">
                            <el-button
                              class="join_btn22"
                              type="primary"
                              @mousedown.native="handleOk2('rightli' + index)"
                              @click="handleOk('rightli' + index)"
                            >
                              <span class="iconimg22"></span>
                              <span>
                                复制文案
                              </span>
                            </el-button>
                          </div>
                          <div class="position_hover" :id="'rightli' + index">
                            <!-- <el-card
                              shadow="always"
                              :body-style="{ padding: '10px' }"
                            > -->
                            <div class="demo-image__lazy">
                              <el-image
                                class="elimghover"
                                fit
                                :src="item.goods_img"
                              >
                                <!-- <div slot="placeholder" class="image-slot">
                                    <Goodsloading></Goodsloading>
                                  </div> -->
                              </el-image>
                            </div>
                            <div>{{ item.goods_name }}</div>
                            <div>
                              原价:{{ item.goods_price }}【卷后价:{{
                                item.after_coupon_price
                              }}】 包邮
                            </div>
                            <div>领卷:{{ item.coupon_url }}</div>
                            <div>抢购:{{ item.goods_url }}</div>
                            <!-- </el-card> -->
                          </div>
                        </div>
                      </div>
                      <div class="shops_info22">
                        <el-row :gutter="20">
                          <el-col :span="20">
                            <div class="disflex">
                              <span class="childone">优惠卷剩余:</span>
                              <div class="childtwo">
                                <span style="color:red">{{
                                  item.coupon_collar_count
                                }}</span
                                >/{{ item.coupon_num }}
                              </div>
                            </div>
                          </el-col>
                          <el-col :span="20"
                            ><div class="disflex">
                              <span class="childone">店铺:</span>
                              <span class="childtwo">{{ item.shop_name }}</span>
                            </div>
                          </el-col>
                          <el-col :span="20"
                            ><div class="disflex">
                              <span class="childone">放单人:</span>
                              <span class="childtwo">{{ item.nickname }}</span>
                            </div>
                          </el-col>
                        </el-row>
                      </div>
                      <!-- <div class="shops_info22">
                        <el-row :gutter="20">
                          <el-col :span="12"
                            ><div>
                              优惠卷剩余:<span style="color:red">{{
                                item.num
                              }}</span
                              >/{{ item.coupon_num }}
                            </div>
                          </el-col>
                          <el-col :span="8"
                            ><div>
                              店铺:<span>{{ item.shop_name }}</span>
                            </div>
                          </el-col>
                          <el-col :span="8"
                            ><div>
                              放单人:<span>{{ item.nickname }}</span>
                            </div>
                          </el-col>
                        </el-row>
                      </div> -->
                    </div>
                  </div>
                </el-card>
              </div>
            </div>
          </div>
          <div v-if="nogoodsShow" class="nogoods">
            <div style="padding-top:230px">
              <h3 style="margin-top: 0;padding-top: 25px;">
                抱歉，暂时没有找到合适商品
              </h3>
              <h4 style="margin-top: 0;padding-top: 10px;">
                我们会努力寻找更多的商品哦~
              </h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Goodsloading from "@/components/Goodsloading.vue";
import pageloading from "@/components/pageloading.vue";
// import { getClassInfo, getGoodsInfo } from "@/api/local/goods";
import { getClassInfo, getGoodsInfo, getGoodsList } from "@/api/goods/goods";
import { addCollection } from "@/api/user/user";

export default {
  name: "NowList",
  components: {
    Goodsloading,
    pageloading
  },
  data() {
    return {
      currentPage: 1,
      count: 0,
      loading: true,
      goodsShow: "",
      nogoodsShow: "",
      Expand: true,
      radio: "0",
      dataid: "",
      topList: [
        // {
        //   id: 15, //商品id
        //   goods_name: "【明星同款】Champion带标 短袖T恤 经典刺秀 男女款", //商品名称
        //   nickname: "17339612793",
        //   coupon_price: "0.00", //优惠卷金额
        //   goods_img: require("@/assets/images/goodsimg.jpg"), //商品主图
        //   goods_price: "30.00", //商品单价
        //   after_coupon_price: "40.00", // 卷后单价
        //   commission_than: "10", //佣金比例
        //   coupon_collar_count: 1, //优惠卷领取数量
        //   goods_day_num: 0, //月销量
        //   coupon_num: 10, // 优惠卷总量
        //   shop_name: "测试店铺" //店铺名称
        // }
        // {
        //   id: 1, //商品id
        //   coupon_price: "0.00", //优惠卷金额
        //   goods_name: "【明星同款】Champion带标 短袖T恤 经典刺秀 男女款", //商品名称
        //   nickname: "17339612793",
        //   goods_img: require("@/assets/images/goodsimg.jpg"), //商品主图
        //   goods_price: "30.00", //商品单价
        //   after_coupon_price: "40.00", // 卷后单价
        //   commission_than: "10", //佣金比例
        //   coupon_collar_count: 1, //优惠卷领取数量
        //   goods_day_num: 0, //月销量
        //   coupon_num: 10, // 优惠卷总量
        //   shop_name: "测试店铺" //店铺名称
        // }
      ],
      botList: [],
      rightList: [],
      tabsList: [
        {
          id: 0,
          name: "所有分类"
        }
      ],
      class_id: "",
      sort: 1,
      numshow: true
    };
  },

  computed: {},
  created() {
    this.getClassInfo();
    this.getGoodsInfo(1, 82, 1, "");
  },
  mounted() {},
  methods: {
    handleOk2(val) {
      // console.log(val);
      this.$nextTick(function() {
        //nextTick,当前dom渲染完毕的回调
        const selection = window.getSelection();
        const range = document.createRange();
        console.log(document.getElementById(val));
        range.selectNode(document.getElementById(val)); //传入dom
        selection.addRange(range);
        document.execCommand("copy");
        // this.$message.success("复制成功");
        selection.removeAllRanges();
      });
    },
    handleOk(val) {
      console.log(val);
      this.$nextTick(function() {
        //nextTick,当前dom渲染完毕的回调
        const selection = window.getSelection();
        const range = document.createRange();
        console.log(document.getElementById(val));
        range.selectNode(document.getElementById(val)); //传入dom
        selection.addRange(range);
        document.execCommand("copy");
        this.$message.success("复制成功");
        selection.removeAllRanges();
      });
    },
    //加入收藏
    addCollection(goods_id) {
      console.log(goods_id);
      addCollection({
        goods_id: goods_id
      })
        .then(res => {
          if (res.code == 200) {
            console.log("返回", res);
            this.$message.success("收藏成功!");
          } else {
            this.$message.info(res.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getGoodsList(pagesize) {
      getGoodsList({
        page: 1,
        pagesize: pagesize
      })
        .then(res => {
          console.log(res);
          this.rightList = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // handleSizeChange(val) {
    //   console.log(`每页 ${val} 条`);
    // },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getGoodsInfo(this.currentPage, 82, this.sort, this.class_id);
    },
    getGoodsInfo(page, pagesize, sort, class_id) {
      this.topList = [];
      this.botList = [];
      this.rightList = [];
      this.loading = true;
      this.goodsShow = "";
      this.nogoodsShow = "";
      getGoodsInfo({
        page: page,
        pagesize: pagesize,
        sort: sort,
        class_id: class_id === "" ? undefined : class_id
      })
        .then(res => {
          const goodslegth = Math.round(res.data.data.length / 4);
          console.log("goodslegth", goodslegth);
          if (goodslegth > 0) {
            if ((res.data.count - 2) % 5 === 0) {
              if (res.data.count < 11) {
                this.getGoodsList(goodslegth);
              } else {
                this.getGoodsList(goodslegth - 1);
              }
            } else {
              if (7 <= res.data.count <= 10) {
                this.getGoodsList(goodslegth - 1);
              } else {
                this.getGoodsList(goodslegth);
              }
            }
          }
          this.count = res.data.count;
          console.log("销售榜", res.data);
          if (res.data.data.length > 2) {
            for (var i = 0; i < res.data.data.length; i++) {
              if (i < 2) {
                this.topList.push(res.data.data[i]);
              } else {
                this.botList.push(res.data.data[i]);
              }
            }
          } else {
            this.topList = res.data.data;
          }
          // this.rightList = res.data.data;
          if (res.data.data.length > 0) {
            this.goodsShow = true;
            this.nogoodsShow = false;
          } else {
            this.goodsShow = false;
            this.nogoodsShow = true;
          }
          this.loading = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // getGoodsList() {
    //   getGoodsList()
    //     .then(res => {
    //       console.log("商品列表", res.data);
    //       // this.topList = res.result.data;
    //       // this.botList = res.data.data;
    //       // this.rightList = res.data.data;
    //     })
    //     .catch(err => {
    //       console.log(err);
    //     });
    // },
    getClassInfo() {
      this.tabsList = [
        {
          id: 0,
          name: "所有分类"
        }
      ];
      getClassInfo()
        .then(res => {
          console.log(res);
          this.tabsList.push(...res.data);
        })
        .catch(err => {
          console.log(err);
        });
    },
    godetails(id) {
      let routes = this.$router.resolve({
        path: "/optimGoods/goodsDetails",
        query: { id: id }
      });
      window.open(routes.href, "_blank");
    },
    tabsEnter() {
      this.$refs.tabs1.style.width = "200px";
    },
    tabsLeave() {
      this.$refs.tabs1.style.width = "0px";
    },
    tabsEnter2() {
      this.$refs.tabs2.style.width = "200px";
    },
    tabsLeave2() {
      this.$refs.tabs2.style.width = "0px";
    },
    changeTabs() {
      console.log(this.$refs.tabs1.classList);
      this.$refs.taber_img1.style.color = "yellow";
      this.$refs.taber_img2.style.color = "white";
      this.$refs.tabs1.classList.add("tabs3");
      this.$refs.tabs2.classList.remove("tabs3");
      this.currentPage = 1;
      this.sort = 1;
      this.numshow = true;
      this.getGoodsInfo(this.currentPage, 80, this.sort, this.class_id);
    },
    changeTabs2() {
      console.log(this.$refs.tabs1.classList);
      this.$refs.tabs1.style.width = "0px";
      this.$refs.taber_img1.style.color = "white";
      this.$refs.taber_img2.style.color = "yellow";
      this.$refs.tabs1.classList.remove("tabs3");
      this.$refs.tabs2.classList.add("tabs3");
      this.currentPage = 1;
      this.sort = 2;
      this.numshow = false;
      this.getGoodsInfo(this.currentPage, 82, this.sort, this.class_id);
    },
    changebar(e) {
      if (e.target.tagName.toLowerCase() === "input") {
        console.log("e.target.value", e.target.value);
        if (e.target.value === "0") {
          this.class_id = undefined;
          this.getGoodsInfo(this.currentPage, 82, this.sort, "");
        } else {
          this.class_id = e.target.value;
          this.getGoodsInfo(this.currentPage, 82, this.sort, this.class_id);
        }
        // const letter = e.target.value.toString();
        // var targetbox = document.getElementsByClassName(this.dataid);
        // console.log(targetbox);
      }
    }
  }
};
</script>

<style lang="less" scoped>
@keyframes landr {
  0% {
    transform: rotate(0deg);
    transform-origin: right bottom 0;
  }
  39% {
    transform: rotate(5deg);
    transform-origin: right bottom 0;
  }
  40% {
    transform: rotate(5deg);
    transform-origin: left bottom 0;
  }
  75% {
    transform: rotate(-10deg);
    transform-origin: left bottom 0;
  }
  100% {
    transform: rotate(0deg);
    transform-origin: left bottom 0;
  }
}
@-webkit-keyframes landr {
  0% {
    -webkit-transform: rotate(0deg);
    -webkit-transform-origin: right bottom 0;
  }
  39% {
    -webkit-transform: rotate(5deg);
    webkit-transform-origin: right bottom 0;
  }
  40% {
    -webkit-transform: rotate(5deg);
    -webkit-transform-origin: left bottom 0;
  }
  75% {
    -webkit-transform: rotate(-10deg);
    -webkit-transform-origin: left bottom 0;
  }
  100% {
    -webkit-transform: rotate(0deg);
    -webkit-transform-origin: left bottom 0;
  }
}
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.loading {
  width: 1200px;
  height: 500px;
  margin: 0 auto;
}
.nowList {
  width: 100%;
  background: url("~@/assets/images/tab_bannr_bj.png") no-repeat center;
  background-position: top;
  .nowList_main {
    width: 1200px;
    margin: 0 auto;
    .taber {
      width: 500px;
      padding-top: 30px;
      padding-bottom: 30px;
      margin: 0 auto;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .taber_left {
        position: relative;
        width: 200px;
        height: 40px;
        overflow: hidden;
        cursor: pointer;
        font-size: 32px;
        color: white;
        .taber_img1 {
          color: yellow;
          //   position: absolute;
          //   top: -40px;
          //   left: 0;
        }
      }
      .tabs1 {
        width: 200px;
        height: 10px;
        transition: all 0.2s linear;
      }
      .taber_right {
        position: relative;
        width: 200px;
        height: 40px;
        overflow: hidden;
        font-size: 32px;
        cursor: pointer;
        color: white;
        // .taber_img2 {
        //   position: absolute;
        //   top: 0;
        //   left: -200px;
        // }
      }
      .tabs2 {
        width: 0;
        height: 10px;
        transition: all 0.2s linear;
      }
      .tabs3 {
        width: 200px !important;
      }
    }
    .goods_Box {
      width: 100%;
      .goods_main {
        width: 1200px;
        margin: 0 auto;
        .goods_taber {
          width: 100%;
          margin: 0 auto;
          margin-bottom: 20px;
          border-radius: 8px;
          background-color: rgba(224, 224, 230, 0.5);
          .taber_ul {
            width: 98%;
            margin: 0 auto;
            font-size: 15px;
            height: 70px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            .taber_li {
              width: 65px;
              height: 30px;
              line-height: 30px;
              border-radius: 15px;
              cursor: pointer;
              color: rgb(255, 255, 255);
              input {
                display: none;
              }
              label {
                display: inline-block;
                padding-left: 6px;
                padding-right: 6px;
                width: 100%;
                height: 100%;
                text-align: center;
                border-radius: 5px;
                border-radius: 15px;
              }

              input:checked + label {
                background-color: rgba(255, 255, 255, 1);
                color: #ff6a44;
              }
            }
            .taber_li:hover {
              color: rgba(224, 224, 230, 0.7);
            }
          }
        }
        .goods_list {
          width: 1200px;
          padding-top: 40px;
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          .goods_left {
            // width: 70%;
            .goods_top {
              width: 960px;
              position: relative;
              display: flex;
              // justify-content: space-between;
              align-items: center;
              margin-bottom: 20px;
              .rowBox {
                width: 960px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .hover_box {
                  position: relative;
                  // width: 100%;
                  .position_Box {
                    position: relative;
                    .topimg {
                      position: absolute;
                      top: -8px;
                      left: 20px;
                      z-index: 2;
                    }
                    .top_num {
                      position: absolute;
                      top: 18px;
                      left: 43px;
                      font-size: 23px;
                      color: #ffffff;
                      z-index: 3;
                    }
                  }
                  .elimg {
                    width: 220px;
                    height: 220px;
                  }
                  .top_main {
                    // width: 947px;
                    overflow: hidden;
                    background-color: #fff;
                    height: 220px;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    .top_right {
                      padding: 20px;
                      width: 200px;
                      margin: 0 auto;

                      .top_title {
                        width: 200px;
                        margin: 3px auto;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        a {
                          font-size: 14px;
                          text-decoration: none;
                        }
                      }
                      .top_roll {
                        width: 179px;
                        height: 44px;
                        line-height: 44px;
                        border-radius: 8px;
                        margin: 0 auto;
                        margin-top: 10px;
                        background-color: rgba(148, 144, 144, 0.1);
                        span {
                          font-size: 20px;
                          margin-left: 5px;
                          margin-right: 5px;
                          color: #ff4215;
                          font-weight: bold;
                        }
                      }
                      .top_data {
                        height: 70px;
                        font-size: 13px;
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                        p {
                          margin-top: 0 !important;
                          margin-bottom: 0 !important;
                        }
                        p:first-child {
                          color: #333;
                          font-size: 16px;
                          font-weight: bold;
                        }
                      }
                    }
                  }
                  .shops_Box {
                    // width: 100%;
                    .shops_action {
                      padding-bottom: 12px;
                      position: absolute;
                      top: 220px;
                      left: 0px;
                      // z-index: -1;
                      opacity: 0;
                      transition: all 1s initial;
                      .action_box {
                        width: 220px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .join_collect {
                          background-color: #fb522b;
                          overflow: hidden;
                          border-top-left-radius: 10px;
                          .join_btn1 {
                            background-color: #fb522b;
                            border: none;
                            .iconimg1 {
                              display: inline-block;
                              width: 17px;
                              height: 15px;
                              overflow: hidden;
                              background: url("~@/assets/images/icon_a.png");
                              background-position: 37px -3px;
                              // object-fit: cover;
                              transform: scale(1);
                              transition: all 0.3s initial;
                            }
                          }
                        }
                        .join_collect:hover {
                          span {
                            color: #ff9;
                          }
                          .iconimg1 {
                            // transform: translate(1px);
                            // transform: scale(1.3);
                            animation: landr 0.8s ease-in-out;
                          }
                        }
                        .copy {
                          background-color: rgb(255, 129, 48);
                          overflow: hidden;
                          border-top-right-radius: 10px;
                          .join_btn2 {
                            background-color: rgb(255, 129, 48);
                            border: none;
                            .iconimg2 {
                              display: inline-block;
                              width: 17px;
                              height: 15px;
                              overflow: hidden;
                              background: url("~@/assets/images/icon_a.png");
                              background-position: 39px -23px;
                              // object-fit: cover;
                              transform: scale(1);
                              transition: all 0.3s initial;
                            }
                          }
                        }
                        .position_hover {
                          border-radius: 12px;
                          box-sizing: border-box;
                          padding: 10px;
                          color: white;
                          background-color: #00000075;
                          display: none;
                          position: absolute;
                          top: -100px;
                          left: 230px;
                          width: 220px;
                          text-align: left;
                          // word-break: keep-all;
                          // white-space: nowrap;
                          font-size: 12px;
                          opacity: 0;
                          z-index: -999;
                          .elimghover {
                            width: 80px;
                          }
                        }
                        .copy:hover + .position_hover {
                          display: block;
                          opacity: 1;
                          z-index: 999999;
                        }
                        .copy:hover {
                          span {
                            color: #ff9;
                          }
                          .iconimg2 {
                            // transform: translateX(1px), translatey(1px);
                            // transform: scale(1.3);
                            animation: landr 0.8s ease-in-out;
                          }
                        }
                      }
                    }
                    .shops_info {
                      position: absolute;
                      top: 138px;
                      left: 0;
                      width: 460px;
                      height: 70px;
                      background-color: #fff;
                      border-bottom-right-radius: 10px;
                      border-bottom-left-radius: 10px;
                      z-index: -100;
                      border-bottom: 1px solid #ebeef5;
                      border-left: 1px solid #ebeef5;
                      border-right: 1px solid #ebeef5;
                      // transition: all 1s initial;
                      padding-bottom: 12px;
                      div {
                        padding-top: 5px;
                      }
                    }
                  }
                }
                .hover_box:hover {
                  .shops_Box {
                    .shops_action {
                      transition: all 300ms ease;
                      -moz-transition: all 300ms ease;
                      -webkit-transition: all 300ms ease;
                      top: 180px;
                      opacity: 1;
                      z-index: 10;
                    }
                  }
                  .shops_info {
                    transition: all 300ms ease;
                    -moz-transition: all 300ms ease;
                    -webkit-transition: all 300ms ease;
                    top: 220px;
                    z-index: 5;
                  }
                }
              }
            }
            .goods_bot {
              position: relative;
              .hover_box2 {
                position: relative;
                width: 243px;
                border-radius: 12px;
                margin-bottom: 20px;
                display: flex;
                display: -webkit-flex;
                flex-direction: row;
                flex-wrap: wrap;
                .topimg2 {
                  position: absolute;
                  top: -8px;
                  left: 20px;
                  z-index: 2;
                }
                .top_num2 {
                  position: absolute;
                  top: 18px;
                  left: 43px;
                  font-size: 23px;
                  color: #ffffff;
                  z-index: 3;
                }
                // .elimg2 {
                //   width: 220px;
                //   // height: 220px;
                // }
                .top_main2 {
                  background-color: #fff;
                  // height: 220px;
                  // display: flex;
                  // justify-content: space-around;
                  // align-items: center;
                  .top_right2 {
                    padding-top: 10px;
                    // width: 220px;
                    font-size: 13px;
                    margin: 0 auto;
                    padding-bottom: 20px;
                    .top_title2 {
                      width: 200px;
                      margin: 3px auto;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      padding-top: 8px;
                      padding-bottom: 8px;
                      a {
                        margin-left: 8px;
                        margin-right: 8px;
                        font-size: 14px;
                        text-decoration: none;
                      }
                    }
                    .top_roll2 {
                      padding-top: 8px;
                      padding-bottom: 8px;
                      width: 150px;
                      height: 25px;
                      line-height: 25px;
                      border-radius: 8px;
                      margin: 0 auto;
                      background-color: rgba(148, 144, 144, 0.1);
                      span {
                        font-size: 16px;
                        margin-left: 5px;
                        margin-right: 5px;
                        color: #ff4215;
                        font-weight: bold;
                      }
                    }
                    .top_data2 {
                      height: 70px;
                      font-size: 13px;
                      display: flex;
                      justify-content: space-around;
                      align-items: center;
                      p {
                        margin-top: 0 !important;
                        margin-bottom: 0 !important;
                      }
                      p:first-child {
                        color: #333;
                        font-size: 16px;
                        font-weight: bold;
                      }
                    }
                  }
                }
                .shops_Box2 {
                  // width: 100%;
                  .shops_action2 {
                    position: absolute;
                    top: 220px;
                    left: 13px;
                    z-index: -11;
                    opacity: 0;
                    transition: all 1s initial;
                    .action_box2 {
                      width: 217px;
                      display: flex;
                      // justify-content: space-betwe;
                      align-items: center;
                      .join_collect2 {
                        background-color: #fb522b;
                        overflow: hidden;
                        border-top-left-radius: 10px;
                        .join_btn12 {
                          background-color: #fb522b;
                          border: none;
                          margin: 0 auto;
                          .iconimg12 {
                            display: inline-block;
                            width: 17px;
                            height: 15px;
                            overflow: hidden;
                            margin-left: -8px;
                            background: url("~@/assets/images/icon_a.png");
                            background-position: 37px -1px;
                            // object-fit: cover;
                            transform: scale(1);
                            transition: all 0.3s initial;
                          }
                        }
                      }
                      .join_collect2:hover {
                        span {
                          color: #ff9;
                        }
                        .iconimg12 {
                          // transform: translate(1px);
                          // transform: scale(1.3);
                          animation: landr 0.8s ease-in-out;
                        }
                      }
                      .copy2 {
                        background-color: rgb(255, 129, 48);
                        overflow: hidden;
                        border-top-right-radius: 10px;
                        .join_btn22 {
                          background-color: rgb(255, 129, 48);
                          border: none;
                          .iconimg22 {
                            display: inline-block;
                            width: 17px;
                            height: 15px;
                            overflow: hidden;
                            margin-left: -8px;
                            background: url("~@/assets/images/icon_a.png");
                            background-position: 39px -22px;
                            // object-fit: cover;
                            transform: scale(1);
                            // transition: all 0.3s initial;
                          }
                        }
                      }
                      .position_hover {
                        border-radius: 12px;
                        box-sizing: border-box;
                        padding: 10px;
                        color: white;
                        background-color: #00000075;
                        display: none;
                        position: absolute;
                        top: -100px;
                        left: 225px;
                        width: 300px;
                        text-align: left;
                        // word-break: keep-all;
                        // white-space: nowrap;
                        font-size: 12px;
                        opacity: 0;
                        z-index: -999;
                        .elimghover {
                          width: 80px;
                        }
                      }
                      .copy2:hover + .position_hover {
                        display: block;
                        opacity: 1;
                        z-index: 999999;
                      }
                      .copy2:hover {
                        span {
                          color: #ff9;
                        }
                        .iconimg22 {
                          // transform: translateX(1px), translatey(1px);
                          // transform: scale(1.3);
                          animation: landr 0.8s ease-in-out;
                        }
                      }
                    }
                  }
                  .shops_info22 {
                    position: absolute;
                    top: 370px;
                    left: 12px;
                    width: 217px;
                    height: 70px;
                    font-size: 12px;
                    background-color: #fff;
                    border-bottom-right-radius: 10px;
                    border-bottom-left-radius: 10px;
                    z-index: -1;
                    border-bottom: 1px solid #ebeef5;
                    border-left: 1px solid #ebeef5;
                    border-right: 1px solid #ebeef5;
                    transition: all 1s initial;
                    padding-bottom: 12px;
                    display: flex;
                    align-items: center;
                    div {
                      width: 100%;
                      padding-top: 5px;
                    }
                  }
                }
              }
              .hover_box2:hover {
                .shops_Box2 {
                  .shops_action2 {
                    transition: all 300ms ease;
                    -moz-transition: all 300ms ease;
                    -webkit-transition: all 300ms ease;
                    top: 180px;
                    opacity: 1;
                    z-index: 6;
                  }
                  .shops_info22 {
                    transition: all 300ms ease;
                    -moz-transition: all 300ms ease;
                    -webkit-transition: all 300ms ease;
                    top: 433px;
                    opacity: 1;
                    z-index: 5;
                  }
                }
              }
            }
          }
          .goods_right {
            // width: 30%;
            width: 220px;
            .hover_box3 {
              position: relative;
              width: 220px;
              // height: 450px;
              border-radius: 12px;
              // padding-bottom: 70px;
              display: flex;
              display: -webkit-flex;
              // justify-content: space-between;
              flex-direction: row;
              flex-wrap: wrap;
              margin-bottom: 20px;
              .position_Box3 {
                position: relative;
                .topimg3 {
                  position: absolute;
                  top: 0px;
                  left: 0px;
                  z-index: 2;
                }
              }
              // .elimg2 {
              //   width: 220px;
              //   // height: 220px;
              // }
              .top_main3 {
                background-color: #fff;
                // height: 220px;
                // display: flex;
                // justify-content: space-around;
                // align-items: center;
                .top_right2 {
                  padding-top: 10px;
                  // width: 220px;
                  font-size: 13px;
                  margin: 0 auto;
                  padding-bottom: 20px;
                  .top_title2 {
                    width: 200px;
                    margin: 3px auto;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    padding-top: 8px;
                    padding-bottom: 8px;
                    a {
                      margin-left: 8px;
                      margin-right: 8px;
                      font-size: 14px;
                      text-decoration: none;
                    }
                  }
                  .top_roll2 {
                    padding-top: 8px;
                    padding-bottom: 8px;
                    width: 150px;
                    height: 25px;
                    line-height: 25px;
                    border-radius: 8px;
                    margin: 0 auto;
                    background-color: rgba(148, 144, 144, 0.1);
                    span {
                      font-size: 16px;
                      margin-left: 5px;
                      margin-right: 5px;
                      color: #ff4215;
                      font-weight: bold;
                    }
                  }
                  .top_data2 {
                    height: 70px;
                    font-size: 13px;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    p {
                      margin-top: 0 !important;
                      margin-bottom: 0 !important;
                    }
                    p:first-child {
                      color: #333;
                      font-size: 16px;
                      font-weight: bold;
                    }
                  }
                }
              }
              .shops_Box2 {
                // width: 100%;
                .shops_action2 {
                  position: absolute;
                  top: 194px;
                  left: 2px;
                  z-index: -11;
                  opacity: 0;
                  transition: all 1s initial;
                  .action_box2 {
                    width: 220px;
                    display: flex;
                    // justify-content: space-betwe;
                    align-items: center;
                    .join_collect2 {
                      background-color: #fb522b;
                      overflow: hidden;
                      border-top-left-radius: 10px;
                      .join_btn12 {
                        background-color: #fb522b;
                        border: none;
                        margin: 0 auto;
                        .iconimg12 {
                          display: inline-block;
                          width: 17px;
                          height: 15px;
                          overflow: hidden;
                          margin-left: -8px;
                          background: url("~@/assets/images/icon_a.png");
                          background-position: 37px -1px;
                          // object-fit: cover;
                          transform: scale(1);
                          transition: all 0.3s initial;
                        }
                      }
                    }
                    .join_collect2:hover {
                      span {
                        color: #ff9;
                      }
                      .iconimg12 {
                        // transform: translate(1px);
                        // transform: scale(1.3);
                        animation: landr 0.8s ease-in-out;
                      }
                    }
                    .copy2 {
                      background-color: rgb(255, 129, 48);
                      overflow: hidden;
                      border-top-right-radius: 10px;
                      .join_btn22 {
                        background-color: rgb(255, 129, 48);
                        border: none;
                        .iconimg22 {
                          display: inline-block;
                          width: 17px;
                          height: 15px;
                          overflow: hidden;
                          margin-left: -8px;
                          background: url("~@/assets/images/icon_a.png");
                          background-position: 39px -22px;
                          // object-fit: cover;
                          transform: scale(1);
                          transition: all 0.3s initial;
                        }
                      }
                    }
                    .position_hover {
                      border-radius: 12px;
                      box-sizing: border-box;
                      padding: 10px;
                      color: white;
                      background-color: #00000075;
                      display: none;
                      position: absolute;
                      top: -100px;
                      left: 225px;
                      width: 280px;
                      text-align: left;
                      // word-break: keep-all;
                      // white-space: nowrap;
                      font-size: 12px;
                      opacity: 0;
                      z-index: -999;
                      .elimghover {
                        width: 80px;
                      }
                    }
                    .copy2:hover + .position_hover {
                      display: block;
                      opacity: 1;
                      z-index: 999999;
                    }
                    .copy2:hover {
                      span {
                        color: #ff9;
                      }
                      .iconimg22 {
                        // transform: translateX(1px), translatey(1px);
                        // transform: scale(1.3);
                        animation: landr 0.8s ease-in-out;
                      }
                    }
                  }
                }
                .shops_info22 {
                  position: absolute;
                  top: 370px;
                  left: 0;
                  width: 218px;
                  height: 70px;
                  font-size: 12px;
                  background-color: #fff;
                  border-bottom-right-radius: 10px;
                  border-bottom-left-radius: 10px;
                  z-index: -1;
                  opacity: 0;
                  border-bottom: 1px solid #ebeef5;
                  border-left: 1px solid #ebeef5;
                  border-right: 1px solid #ebeef5;
                  transition: all 1s initial;
                  padding-bottom: 12px;
                  display: flex;
                  align-items: center;
                  div {
                    width: 100%;
                    padding-top: 5px;
                  }
                }
              }
            }
            .hover_box3:hover {
              .shops_Box2 {
                .shops_action2 {
                  transition: all 300ms ease;
                  -moz-transition: all 300ms ease;
                  -webkit-transition: all 300ms ease;
                  top: 180px;
                  opacity: 1;
                  z-index: 6;
                }
                .shops_info22 {
                  transition: all 300ms ease;
                  -moz-transition: all 300ms ease;
                  -webkit-transition: all 300ms ease;
                  top: 433px;
                  opacity: 1;
                  z-index: 5;
                }
              }
            }
          }
          /* 公共样式 */
          // 优惠卷
          .coupon_Box {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 25px;
            line-height: 25px;
            margin-bottom: 10px;
            .coupon_img {
              display: flex;
              justify-content: space-around;
              align-items: center;
              width: 65px;
              height: 25px;
              background: url("~@/assets/images/sale_box.png") no-repeat center;
              color: white;
            }
          }
          .disflex {
            display: flex !important;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            box-sizing: border-box;
            padding-left: 20px;
            padding-right: 10px;
            text-align: left;
            .childone {
              display: inline-block;
              width: 150px !important;
            }
            .childtwo {
              text-align: right;
              white-space: nowrap;
            }
          }
        }
      }
      .nogoods {
        width: 1200px;
        height: 350px;
        border-radius: 12px;
        // line-height: 200px;
        background: url("~@/assets/images/nogoods.png") no-repeat center;
        background-position-y: 20px;
        background-color: #ecfbf6;
        div {
          margin-top: 60px;
        }
      }
    }
  }
}
</style>
